<template>
  <div>
    <el-card class="app-container">
      <div class="search">
        <el-form label-position="right" inline label-width="80px" size="mini">
          <el-form-item label="商品ID">
            <el-input placeholder="多个查询按空格或者逗号隔开依次输入" clearable class="search__item" v-model="searchParams.ids"/>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input placeholder="请输入商品名称" clearable class="search__item" v-model="searchParams.title"/>
          </el-form-item>
          <!--        <el-form-item label="商品分类">-->
          <!--          <el-input placeholder="请输入商品名称" clearable class="search__item" v-model="searchParams.title"/>-->
          <!--        </el-form-item>-->
          <br/>
          <el-form-item label="累计销量">
            <el-row class="search__item">
              <el-col :span="10">
                <el-input
                  v-model="searchParams.minSales"
                  placeholder="最低值"
                  clearable
                  class="search__item search__item--span"/>
              </el-col>
              <el-col :span="4" class="text-center">-</el-col>
              <el-col :span="10">
                <el-input
                  v-model="searchParams.maxSales"
                  placeholder="最高值"
                  clearable
                  class="search__item search__item--span"
                />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" @click="loadData">查询</el-button>
            <el-button type="default" @click="handleSearchFormClear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="toolbar">
        <el-radio-group size="mini" v-model="searchParams.status" @change="loadData">
          <el-radio-button :label="o.id" v-for="o in statusOptions" :key="o.id">{{ o.name }}</el-radio-button>
        </el-radio-group>
      </div>
      <el-table
        title="商品列表"
        :data="dataList"
        v-loading="isLoading"
        border
        stripe
        header-row-class-name="table-header-row">
        <el-table-column label="商品信息" width="auto">
          <template slot-scope="scope">
            <div class="spu flex">
              <el-image :src="scope.row.mainImg" class="spu__img" :preview-src-list="[scope.row.mainImg]"/>
              <div class="spu__info">
                <div class="spu__id">ID: {{ scope.row.id }}</div>
                <div class="spu__title">
                  {{ scope.row.title }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="当前价" width="100">
          <template slot-scope="scope">
            <div class="flex">
              ￥ {{ scope.row.price }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收藏数" width="80" prop="collectedNum"/>
        <el-table-column label="库存" width="80" prop="stock"/>
        <el-table-column label="累计销量" width="100" prop="sales"/>
        <el-table-column label="创建时间" width="160">
          <template slot-scope="scope">
            <div>
              {{ scope.row.gmtCreate }}
              <div class="spu__status">
                {{ scope.row.status }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <a size="mini" :href="'/#/pdt/spu/edit?id=' + scope.row.id" target="_blank">编辑</a>
            <br/>
            <el-button type="text" @click="handleOffline(scope.row)" v-if="scope.row.isOnline" size="mini">下架
            </el-button>
            <el-button type="text" @click="handleOnline(scope.row)" v-else size="mini">上架</el-button>
            <br/>
            <el-button type="text" size="mini">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
          :total="dataCount"
          :page-size.sync="pageParams.pageSize"
          layout="total,sizes, prev, pager, next"
          :current-page.sync="pageParams.pageNo"
          @size-change="loadData"
          @current-change="loadData"/>
      </div>
    </el-card>
    <div class="btn-area-holder">
    </div>
    <div class="btn-area btn-area--fixed text-center">
      <!--      <el-button type="primary" size="small" :loading="isSubmitting" @click="handleSubmit">提交并上架</el-button>-->
      <el-button type="primary" @click="handleToNewSpu">发布新商品</el-button>
    </div>
  </div>

</template>

<script>

import {spuApi} from '@/feature/pdt/infra/api/spuApi'
import FormUtil from "@/framework/infra/form/FormUtil";
import SpuStatusEnum from "@/feature/pdt/infra/constants/SpuStatusEnum";

export default {
  data() {
    return {
      dataList: [],
      searchParams: {
        ids: '',
        minSales: '',
        maxSales: '',
        status: 1,
        title: ''
      },
      statusOptions: SpuStatusEnum.getValues(),
      isLoading: true,
      dataCount: 0,
      pageParams: {
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    handleToNewSpu() {
      this.$router.push('/pdt/spu/category')
    },
    handleSearchFormClear() {
      FormUtil.reset(this.searchParams, {}, ['status'])
      this.loadData()
    },
    loadData() {
      this.isLoading = true
      spuApi.list({...this.searchParams, ...this.pageParams}).then(data => {
        this.dataList = data.data
        this.dataCount = data.total
      }).finally(() => {
        this.isLoading = false
      })
    },
    handleOffline(row) {
      this.$confirm('是否确定下架商品？', '提示').then(() => spuApi.offline(row.id)).then(() => {
        row.offline()
        this.$message.success('下架成功')
      })
    },
    handleOnline(row) {
      this.$confirm('是否确定上架商品？', '提示').then(() => spuApi.online(row.id)).then(data => {
        row.online()
        this.$message.success('上架成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.spu {
  align-items: flex-start;

  &__img {
    width: 60px;
    height: 60px;
    border-radius: 3px;
    border: 1px solid #eee;
  }

  &__info {
    flex: 1;
    padding-left: 10px;
    color: #666;
    font-size: 12px;
  }

  &__title {
    color: #2656bd;
    line-height: 18px;
  }

  &__status {
    color: #333;
    font-size: 12px;
  }
}

.pager {
  padding-top: 20px;
}

.search {
  background-color: #f7f8fa;
  border-radius: 10px;
  padding: 10px;
  padding-top: 20px;
  box-sizing: border-box;

  &__item {
    width: 240px;

    &--span {
      width: 100%;
    }
  }
}

a {
  color: #409EFF;
  font-size: 12px;
}

.toolbar {
  padding-top: 20px;
  padding-bottom: 20px;
}
</style>
